<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>

	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/assets/css/bootstrap.min.css">
	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css">
	
	
	
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
	<!-- Latest compiled and minified JavaScript -->
	<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
	<!-- Latest compiled and minified Locales -->
	<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>
	
	<style type="text/css">
		*{margin:0px;padding:0px;}
		.cl{clear: both;}
		.lf{float:left;}
		
		.mheader{width:100%;height:40px;background-color: red;}
		.content{width:100%;height:800px;}
		.c-left{height:100%;width:80px;background-color:#e85331;}
		.c-left a{color:white;}
		.c-right{height:600px;width:1200px;}
		.c-right-header li{float:left;margin-left:5px;height:40px;line-height:40px;
		    cursor: pointer;text-align:center;width:50px;}
		.c-right-content{width:100%;height:100%;}
		.ifm{height:600px;width:1200px;}
		.active{background:red;color:white;}
		ul{list-style:none}
	</style>
</head>
<body>
	<div class="mheader">
		站位
	</div>
	<div class="content">
		<div class="c-left lf">
			<ul>
				<li><a href="http://www.baidu.com" target="nav1" class="cl_link" title="百度">百度</a></li>
				<li><a href="http://www.taobao.com" target="nav2" class="cl_link" title="淘宝">淘宝</a></li>
				<li><a href="http://www.qq.com" target="nav3" class="cl_link" title="QQ">QQ</a></li>
				<li><a href="http://www.jd.com" target="nav4" class="cl_link" title="JD">京东</a></li>
				<li><a href="http://www.zhanghetianxia.com" target="nav5" class="cl_link" title="掌合">掌合</a></li>
			</ul>
		</div>
		<div class="c-right lf">
			<ul class="c-right-header">
				<li class="active li-title">首页</li>
			</ul>
			<div class="c-right-content">
				<iframe class="ifm" src="http://localhost:8080/User/manage/list2" name="index"></iframe>
			</div>
		</div>
		
		<div class="cl"></div>
	</div>
	<script type="text/javascript">
		var index = 0;
		$('.cl_link').on('click',function(){
			var thisTarget = $(this).attr('target');
			var isReturn = 0;
			//判断是否已经显示iframe
			$('.ifm').each(function(index){
				if(thisTarget==$(this).attr('name')){
					showIfm(index);
					isReturn = 1;
					return ;
				}
			})
			if(1==isReturn){
				return ;
			}
			
			var str = '<iframe class="ifm" name="'+$(this).attr('target')+'"></iframe>';
			var title = '<li class="li-title">'+$(this).attr('title')+'</li>';
			$('.ifm').each(function(){
				$(this).hide();
			})
			$('.c-right-content').append(str);
			$('.c-right-header').append(title);
			index = index+1;
			ulListMove(index);
		})
		//定位上面的li
		function ulListMove(ind){
			$('.c-right-header .active').removeClass('active');
			$($('.c-right-header li')[ind]).addClass('active');
		}
		//展示已经加载过的iframe
		function showIfm(ind){
			ulListMove(ind);
			$('.ifm').each(function(index){
				if(ind==index){
					$(this).show();
				}else{
					$(this).hide();
				}
			})
		}
		
		
		$('.c-right-header li').on('click',function(){
			alert('ok')
			
			if(!$(this).hasClass('active')){
				showIfm($(this).index);
			}
		})
	</script>
</body>
</html>
